<template>
  <el-container class="full">
    <el-header>
      <el-row>
        <el-col :span="3" class="allTitle">家庭医生签约服务平台</el-col>
        <el-col :span="1" class="OpenClicon" v-model="isCollapse">
          <i class="el-icon-s-fold" @click="openOrClose" v-if="!isCollapse"></i>
          <i class="el-icon-s-unfold" @click="openOrClose" v-else></i>
        </el-col>
        <el-col :span="5">
          <el-breadcrumb separator="/" class="bar">
            <el-breadcrumb-item :to="{ path: '/home' }">统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="2" :offset="11">当前用户：{{userName}}</el-col>
        <el-col :span="2">
          <el-button @click="logout">
            退出登录
            <i class="el-icon-switch-button"></i>
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container class="mainBox">
      <el-aside width="auto">
        <el-menu
          :default-active="menuIndex"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#304156"
          text-color="#fff"
          active-text-color="#409eff"
          :collapse="isCollapse"
           @select="getIndex"
          router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span>统计分析</span>
            </template>
            <el-menu-item index="1-1" :route="{path:'/home/table'}">统计表</el-menu-item>
            <el-menu-item index="1-2" :route="{path:'/home/chart'}">统计图</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>医生团队管理</span>
            </template>
            <el-menu-item index="2-1" :route="{path:'/home/team'}">家庭医生团队管理</el-menu-item>
            <el-menu-item index="2-2" :route="{path:'/home/doctor'}">家庭医生管理</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>家庭医生签约管理</span>
            </template>
            <el-menu-item index="3-1" :route="{path:'/home/contract'}">家庭医生签约管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <el-container class="main-content">
          <transition :name="transitionName">
            <router-view></router-view>
          </transition>
        </el-container>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      isCollapse: false,
      userName: "",
      transitionName: "",
      title:"",
       menuIndex: sessionStorage.getItem("menuIndex")
        ? sessionStorage.getItem("menuIndex")
        : "1-1",
    };
  },
  methods: {
     getIndex(index) {
      sessionStorage.setItem("menuIndex", index);
      this.menuIndex = index;
    },
    handleOpen(key, keyPath) {
      //   console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      //   console.log(key, keyPath);
    },
    openOrClose() {
      //   console.log("click");
      this.isCollapse = !this.isCollapse;
    },
    logout() {
      this.$confirm("是否退出登录?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '删除成功!'
          //   });
          sessionStorage.removeItem("userInfo");
          sessionStorage.removeItem("isLogin");
          this.$router.push("/");
        })
        .catch(() => {
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });
        });
    },
  },
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      this.title=sessionStorage.getItem("title")
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  },
  mounted() {
    this.userName = JSON.parse(sessionStorage.getItem("userInfo")).userName;
    this.title=sessionStorage.getItem("title")
  },
};
</script>
<style lang="less" scoped>
.full {
  width: 100%;
  height: 100%;
}
.el-header {
  color: #333;
  height: 50px !important;
  text-align: center;
  line-height: 50px;
  padding: 0;
  background-color: white;
  box-shadow: rgba(34, 34, 34, 0.274) 0 1px 5px 0px;
}

.el-aside {
  color: #333;
  text-align: left;
  line-height: 200px;
  z-index: 1000;
}

.el-main {
  color: #333;
  text-align: center;
}
.el-menu {
  height: 100%;
}
.el-menu-item {
  background: #1f2d3d !important;
}
.el-aside li:hover {
  background: #001528 !important;
}
.bar {
  height: 50px;
  line-height: 50px;
}
.OpenClicon {
  width: 60px;
  height: 60px;
  font-size: 25px;
  cursor: pointer;
}
.allTitle {
  font-size: 18px;
  font-weight: 600;
}
// .el-breadcrumb /deep/ .el-breadcrumb__inner {
//   color: white !important;
// }
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 239px;
}
.mainBox {
  width: 100%;
  height: calc(100% - 50px);
}
.main {
  height: 100%;
  overflow-y: scroll;
  background-color: white;
}

::-webkit-scrollbar-track-piece {
  -webkit-border-radius: 0;
}
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #b8b8b8;
  -webkit-border-radius: 6px;
  outline-offset: -2px;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
::-webkit-scrollbar-thumb:hover {
  height: 50px;
  background-color: #878987;
  -webkit-border-radius: 6px;
}






	// .slide-right-enter-active,
	// .slide-right-leave-active,
	// .slide-left-enter-active,
	// .slide-left-leave-active {
	//   will-change: transform;
	//   transition: all 700ms;
	//   position: absolute;
	// }
	// .slide-right-enter {
	//   opacity: 0;
	//   transform: translate3d(-100%, 0, 0);
	// }
	// .slide-right-leave-active {
	//   opacity: 0;
	//   transform: translate3d(100%, 0, 0);
	// }
	// .slide-left-enter {
	//   opacity: 0;
	//   transform: translate3d(100%, 0, 0);
	// }
	// .slide-left-leave-active {
	//   opacity: 0;
	//   transform: translate3d(-100%, 0, 0);
	// }
</style>